<template>
    <el-card shadow="always" style="width: 76vw ; margin-top: 20px;">
      <div class="travelogue-grid">
        <div class="travelogue-card" v-for="(travelogue, index) in travelogues" :key="index">
          <div class="card-image">
            <img :src="travelogue.imagePath" :alt="travelogue.title" />
          </div>
          <div class="card-content">
            <h3>{{ travelogue.title }}</h3>
            <p>{{ travelogue.easyText}}</p>
            <div class="meta">
              <div class="user-info">
                <img :src="travelogue?.user?.avatar" alt="用户头像" class="avatar">
                <span class="author-name">{{ travelogue?.user?.userName }}</span>
              </div>
              <div class="stats">
                <span class="likes"><i class="far fa-heart"></i> {{ travelogue.likeCount }}</span>
                <span class="comments"><i class="far fa-comment"></i> {{ travelogue.commentCount}}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="travelogue-card new-guide-card" @click="createNewGuide">
          <div class="new-guide-content">
            <i class="fas fa-plus-circle"></i>
          </div>
        </div>
      </div>
    </el-card>
  </template>
  
  <script setup>
  import { ref ,onMounted} from 'vue';
  import { useRouter } from 'vue-router';
  import {getSpotClass,findThemeCity,getTopTravelogue} from "@/api/travelogue.js";
  const travelogues = ref([
    {
      title: '我的巴黎之旅',
      summary: '在巴黎的街头，感受浪漫与艺术的碰撞',
      image: 'path/to/paris-travelogue.jpg',
      author: '小美',
      avatar: 'path/to/avatar1.jpg',
      likes: 120,
      comments: 45,
    },
    {
      title: '西藏朝圣之旅',
      summary: '在高原上，寻找内心的宁静',
      image: 'path/to/tibet-travelogue.jpg',
      author: '大壮',
      avatar: 'path/to/avatar2.jpg',
      likes: 98,
      comments: 30,
    },
    {
      title: '东京美食之旅',
      summary: '探索东京的美食文化，品尝地道的日式料理',
      image: 'path/to/tokyo-travelogue.jpg',
      author: '阿强',
      avatar: 'path/to/avatar3.jpg',
      likes: 150,
      comments: 60,
    },
    {
      title: '纽约城市探险',
      summary: '在纽约的街头巷尾，发现城市的独特魅力',
      image: 'path/to/nyc-travelogue.jpg',
      author: '小红',
      avatar: 'path/to/avatar4.jpg',
      likes: 200,
      comments: 80,
    },
    {
      title: '巴厘岛度假之旅',
      summary: '在巴厘岛的海滩上，享受阳光与海浪',
      image: 'path/to/bali-travelogue.jpg',
      author: '小明',
      avatar: 'path/to/avatar5.jpg',
      likes: 180,
      comments: 70,
    },
  ]);
  
  const router = useRouter();
  const createNewGuide = () => {
    router.push('/edit-guide');
  };
  const getTravelogue=()=>{
    getTopTravelogue(7).then((res)=>{
      travelogues.value=res.data;
    })

  }
  onMounted(() => {
    getTravelogue();
  })
  </script>
  
  <style scoped>
.travelogue-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 30px;
}

.travelogue-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
  border: #0e9aa7, 1px, solid;
}

.travelogue-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
}

.card-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.travelogue-card:hover .card-image img {
  transform: scale(1.05);
}

.card-content {
  padding: 20px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.card-content h3 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #1a1a1a;
}

.card-content p {
  color: #666;
  line-height: 1.6;
  margin-bottom: 20px;
  flex: 1;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
}

.avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #0e9aa7;
}

.author-name {
  font-size: 0.9rem;
  font-weight: 500;
  color: #1a1a1a;
}

.stats {
  display: flex;
  gap: 15px;
}

.likes,
.comments {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #666;
  font-size: 0.9rem;
}

.new-guide-card {
  display: flex;
  justify-content: center;
  align-items: center;
  background: #f0f0f0;
  border: 2px dashed #ccc;
  cursor: pointer;
}

.new-guide-content {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: #0e9aa7;
  color: white;
  font-size: 2rem;
}
  </style>